<script setup lang="ts">
import { computed } from 'vue'
import type { BaseWindow } from './class/basewindow'

const props = defineProps<{
  data: BaseWindow
}>()

const bottom = computed(() => {
  const rect = props.data.rect as DOMRect
  return rect.height - (props.data.bottom as number)
})

const right = computed(() => {
  const rect = props.data.rect as DOMRect
  return rect.width - (props.data.right as number)
})
</script>

<template>
  <div
    class="window"
    :style="{
      top: `${data.top}px`,
      bottom: `${bottom}px`,
      left: `${data.left}px`,
      right: `${right}px`,
    }"
  >
    <header>
      <span>标题</span>
      <slot name="header"></slot>
    </header>
    <article>
      <slot></slot>
    </article>
  </div>
</template>

<style scoped lang="less">
@height: 2.1875rem;
.window {
  position: absolute;
  border-radius: var(--window-border-radius);
  overflow: hidden;
  & > header {
    height: @height;
    line-height: @height;
    background-color: #353535;
    display: flex;
    border-top-left-radius: var(--window-border-radius);
    border-top-right-radius: var(--window-border-radius);
    overflow: hidden;
    & > *:not(.window-control-area) {
      margin: 0 1rem;
    }
  }
  & > article {
    position: absolute;
    top: @height;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3c3c3c;
    border-bottom-left-radius: var(--window-border-radius);
    border-bottom-right-radius: var(--window-border-radius);
  }
}
</style>
